
import React from 'react'
import ReactDOM from 'react-dom'
import * as PropertyAction  from '../../actions/PropertyAction';
import * as PushMessageAction from '../../actions/PushMessageAction'
import * as ApiMsgAction  from '../../actions/ApiMsgAction';
import { connect }  from 'react-redux';

import PropertySettingTools from './PropertySettingTools'
import PropertySettingList from './PropertySettingList'
import PropertySettingEdit from './PropertySettingEdit'
import PropertyTemplate from './PropertyTemplate'
import PropertyCalendar from './PropertyCalendar'

class PropertySettingBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {}
    }
  }

  componentDidMount() {
    var self = this;
    this.$modal = $(ReactDOM.findDOMNode(this.refs.PropertySettingEdit))
    this.$tempalteModal = $(ReactDOM.findDOMNode(this.refs.PropertyTemplate))
    this.$calendarModal = $(ReactDOM.findDOMNode(this.refs.PropertyCalendar))
    this.props.dispatch(
      PropertyAction.loadPropertyDataAsync()
    )
  }

  componentDidUpdate() {
    // console.log(this.props.data)
    if (this.props.data === 403) {
      // window.location.href = 'login'
    }
    if (this.props.apiMsg && this.props.apiMsg.length > 0) {
      alert(this.props.apiMsg)
      this.props.dispatch(
        ApiMsgAction.clearApiMsgAction()
      )
    }

  }

  onCreateClick() {
    this.setState({
      activeData: {}
    })
    this.$modal.modal("show")
  }

  onDataCreate(data) {
    // console.log(data)
    this.props.dispatch(
      PropertyAction.createPropertyAsync(data)
    )
    this.setState({
      activeData: data
    })
    this.$modal.modal("hide");
  }

  onDataUpdate(data) {
    this.props.dispatch(
      PropertyAction.editPropertyDataAsync(data)
    )
    this.setState({
      activeData: data
    })
    this.$modal.modal("hide");
  }

  onEditClick(index) {
    if (index < this.props.data.length) {
      this.setState({
        activeData: this.props.data[index]
      })
      this.$modal.modal("show")
    }
  }

  onDataSearch(name) {
    var data = {
      name: name
    }
    this.props.dispatch(
      PropertyAction.loadPropertyDataAsync(data)
    )
  }

  onTemplateEdit(data) {
    this.setState({
      activeData: data
    })
    this.$tempalteModal.modal("show")
  }

  onTemplateSumbit(data) {
    this.props.dispatch(
      PushMessageAction.updateAllTemplateAsync(data)
    )
    this.$tempalteModal.modal("hide")
  }

  onDeleteClick(index) {
    if (confirm("确定删除吗？")) {
      var data = this.props.data[index];
      this.props.dispatch(
        PropertyAction.deletePropertyAsync({id: data.id})
      )
    }
  }

  onSyncClick() {
    var target = document.getElementById('react-root');
    showProgress(target);

    this.props.dispatch(
      PropertyAction.syncPropertyDataAsync()
    )
  }

  onVacationClick(data) {
    this.setState({
      activeData: data
    })
    this.$calendarModal.modal("show")
  }

  render() {
    var self = this;
    return (
      <div className="content-body Property-content-body" >
        <PropertySettingTools
          onSyncClick = {this.onSyncClick.bind(self)}
          onDataSearch = {this.onDataSearch.bind(self)}
          onCreateClick={this.onCreateClick.bind(self)}/>
        <PropertySettingList
          data = {this.props.data}
          onTemplateEdit = {this.onTemplateEdit.bind(self)}
          onDeleteClick = {this.onDeleteClick.bind(self)}
          onVacationClick = {this.onVacationClick.bind(self)}
          onEditClick = {this.onEditClick.bind(self)}/>
        <PropertySettingEdit
          ref = "PropertySettingEdit"
          data = {this.state.activeData}
          isEdit = {this.state.activeData.id != undefined}
          onDataUpdate = {this.onDataUpdate.bind(self)}
          onDataCreate = {this.onDataCreate.bind(self)}/>
        <PropertyTemplate
          ref = "PropertyTemplate"
          property = {this.state.activeData}
          onTemplateSumbit = {this.onTemplateSumbit.bind(self)}
        />
        <PropertyCalendar
          ref = "PropertyCalendar"
          property = {this.state.activeData}
        />
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return { data: state.properties ,
          apiMsg: state.apiMsg}
}

export default connect(mapStateToProps)(PropertySettingBody);
